Bung Benk: Tutorial Blogger
Tampilkan postingan dengan label Tutorial Blogger. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial Blogger. Tampilkan semua postingan

24/04/19

Cara Membuat Tampilan Blog Tidak Dapat Diperbesar

Apakah Kamu ingin mengatur tampilan blog Anda agar tidak dapat diperbesar? Jika iya, artikel ini akan memberikan panduan tentang cara melakukan hal tersebut. Dalam artikel ini, kita akan membahas potongan kode yang dapat Kamu tambahkan atau ganti di template blog Kamu untuk bisa menerapkan efek ini.

Pertama-tama, pastikan Kamu membuka editor HTML blog Kamu dan mencadangkan template sebelum melakukan perubahan apa pun. Setelah itu, temukan bagian <head> di kode HTML blog Kamu dan letakkan kode berikut dibawahnya :

<meta charset='utf-8'/>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>

Setelah Kamu menambahkan atau mengganti potongan kode tersebut, simpan perubahan pada template blog Kamu. Selanjutnya, buka blog Anda dan coba untuk melakukan zoom in atau zoom out pada tampilannya. Kamu akan melihat bahwa tampilan blog Kamu tidak dapat diperbesar.

Pastikan untuk menguji tampilan blog Kamu di berbagai perangkat dan browser untuk memastikan bahwa efek ini berfungsi dengan baik. Jika Anda ingin mengembalikan fungsi zoom pada tampilan blog Anda, cukup hapus atau komentar potongan kode yang telah Anda tambahkan sebelumnya.

Sekarang kamu telah mengetahui cara membuat tampilan blog tidak dapat diperbesar. Kamu dapat mengimplementasikan ini untuk memberikan pengalaman pengguna yang lebih terkontrol dan konsisten pada blog Anda.

Semoga artikel ini bermanfaat buat kamu dalam mengatur tampilan blog Anda! Jika Anda memiliki pertanyaan lain, jangan ragu untuk mengajukan.

Apakah blog kamu masih bisa dizoom?
Sisipkan jawabanmu di bawah ya..

10/04/19

Membuat Halaman Under Maintenance Di Blogspot (CSS)


Terkadang pasti ada saja masalah perbaikan yang serin dialami oleh para blogger, termasuk salah satunya memperbaharui design template pada blog, Dalam masa perbaikan tersebut tentu kita tak ingin agar pengunjung datang dan akhirnya membuat pengunjung pergi karena tampilan blog yang berantakan.

Nah untuk mencegah hal tersebut kita perlu membuat halaman khusus yang nantinya pengunjung akaan di arahkan ke halaman khusus ini, halaman ini berisi keterangan bahwa blog sedang di perbaiki/maintenance. Keterangan tersebut umumnya dibuat menuju link gambar tertentu, contohnya seperti ini.

Membuat Halaman Under Maintenance Khusus Dengan CSS


Jika blog kamu sedang ada perbaikan, entah perbaikan template atau apapun itu, ada baiknya membuat Halaman Under Maintenance ini agar nantinya pengunjung bisa kembali lagi dilain waktu setelah blog kita selesai di perbaiki, untuk membuatnya mudah kok, kamu hanya cukup meletakkan kode dibawah ini di atas syle yang pertama atau di atas </head>
<style type='text/css'>
/*<![CDATA[*/
html:after {
  content: "";
  background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXOXT5jq1DnnZvotJ62__NqUNxNYjtyyTSy__d8kYf_1zt1chKRSkiowA5T8paoSpYcuQH2X1i1C4mZSJK5Xt11uju9rGYHxvSeQU0qILSYRDIxJOG_z_pALWGsPbwTEKKEsqvGWc7f2eh/s1600/maintainance.jpg) no-repeat;
  background-size: auto;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100000;
  background-position: center;
}
body {
  display:none;
}
@media screen and (max-width:800px) {
  html:after {
    background-size: contain;
  }
}
/*]]>*/
</style>

Kamu juga bisa mengganti link gambar sesuai keinginanmu sendiri dengan mengganti kode yang di tandai merah

Nah jika sudah selesai simpan template dan lihat hasilnya dengan mengklik link blog kalian yang sudah terpasang Halaman Under Maintenance tersebut.

Demikian.. Happy Blogging gaaaesss..!!!

24/03/19

Solusi SVG Icon Tidak Tampil Di Browser Chrome Versi Mobile

Browser Chrome Mobile Versi Terbaru

Sejak update aplikasi Browser Chrome di ponsel Xiaomi A1 saya, ternyata saya baru menyadari ternyata SVG icon pada Navigasi menu di blog saya tidak muncul. Anehnya SVG icon ini tidak muncul hanya pada browser chrome versi mobile yang saya update sekitar 1 bulan yang lalu hingga akhirnya saya memposting artikel ini.

Saya sudah coba bermacam-macam aplikasi browser bawaan Hp seperti Samsung, Xiaomi, Iphone, Modzilla Firefox, dll namun hanya pada browser chrome versi terbaru saat ini, SVG icon yang ada pada Slide menu tersebut tidak muncul sama sekali, namun ketika diklik Sidebar menu tetap muncul dan berjalan normal.

Entahlah dimana letak kesalahannya, saya sendiri bingung dan pernah suatu hari menanyakan hal ini kepada mas adhy suryadi (kompi ajaib) yang telah Membuat Slide Menu ala AMP Sidebar Untuk Blog Non AMP seperti yang saya gunakan di Blog saya ini. Saya sempat memohon mas adhy untuk mengupdate script maupun htmlnya namun mas adhy menjawab seperti screenshoot berikut.

SVG Icon Eror Pada Template Saya

Dari jawaban mas Adhy diatas akhirnya saya pun coba mengecek nya demo link Slide menu tersebut di link ini, dan ternyata pada demo tersebut SVG iconnya masih normal dan tampil di browser chrome pada ponsel saya. Hmmm.. dimana ya letak kesalahannya? Padahal udah saya cek dengan teliti isi dari pada template yang saya gunakan saat ini, dan sampai saat ini pun blm ketemu.

Barangkali ada teman-teman yang bisa membantu atau pernah mengalami masalah diatas saat menggunakan Slide Menu Ala Kompi ajaib ini, mungkin bisa share pada kolom komentar di bawah ini untuk bisa sama-sama memecahkan masalah tersebut bersama-sama.

Demikian semoga dengan adanya artikel ini, teman-teman bisa memberikan solusi atas permasalahan yang sedang saya alami diatas yaitu mengenai Masalah SVG Icon pada Slide Menu Ala Kompi Ajaib Tidak Muncul Pada Browser Chrome Versi Mobile.

Update Perbaikan:

SVG icon tidak tampil pada browser Chrome terbaru

Ternyata kesalahan ada pada saat saya mengganti kode warna, hal ini seperti apa yang disampaikan kang Adhy Suryadi mengenai pertanyaan saya kepada beliau minggu lalu.

30/01/19

Tentang Artikel Terkait Tidak Muncul Pada Halaman Mobile

Kode Penyebab artikel terkait tidak muncul

Artikel terkait merupakan sebuah link yang umumnya di sertai gambar yang saling berhubungan dengan artikel yang menjadi topik utama di halaman web atau blog. Artikel terkait ini juga berfungsi untuk mengarahkan pengunjung lebih mudah menjangkau topik terkait lainnya agar traffic blog menjadi meningkat.

Nah buat kamu yang masih pake template gratisan yang sudah banyak di bagikan di google mungkin pernah mengalami masalah pada artiket terkait yang tidak muncul sama sekali saat blog dibuka melalui mobile/gadget. Contohnya saja template Viomagz yang banyak di share di internet.

Mengatasi Artikel Terkait Tidak Muncul


Kenapa harus Viomagz? ini semua karena saya sendiri saat ini menggunakan template tersebut di salah satu blog saya dan masalah artikel terkait yang tidak muncul di halaman mobile tersebut saat ini sudah teratasi. Ternyata masalah tersebut ada pada sebuah script yang memang sengaja dibuat agar artikel terkait tidak muncul di halaman mobile.

Nah buat kamu pengguna template yang saya sebutkan diatas (Viomagz) dan ingin Artikel terkaitnya muncul juga di halaman mobile, silakan cari kode script dibawah ini, kode ini biasanya di letakan di bagian atas </body>

<script type='text/javascript'>
//<![CDATA[
var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Related Posts:</h4>",widgetStyle:1,homePage:"http://www.dte.web.id",numPosts:7,summaryLength:125,titleLength:"auto",thumbnailSize:200,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(//$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related-post-style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span class="bg_overlay"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"&hellip;":t;r=("media$thumbnail"in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/.*?:///g , "//").replace(//s[0-9]+(-c)?/, "/s"+d.thumbnailSize):d.noImage;u=("summary"in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"&hellip;":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><div class="related-post-item-thumbnail"><img alt="" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></div><div class="related-post-item-text"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+">"+d.moreText+"</a></span></div>"+y+"</li>"}else{if(A==3||A==4){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-title-thumb" href="'+v+'"'+b+'><div class="related-post-item-thumbnail"><img alt="" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></a></div><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+"</a><span>"+u+"</span></div>"+y+"</li>"}else{if(A==5){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="'+t+'"'+b+'><div class="related-post-item-thumbnail"><img alt="" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><div class="related-post-item-thumbnail"><img alt="" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a title="'+t+'" href="'+v+'"'+b+">"+w+"</a></li>"}}}}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(//$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);
//]]>
</script>

Kemudian cari kode dibawah ini didalam kode script tersebut.

j(d.homePage.replace(/\/$/,"")

Selanjutnya ganti kode yang ada didalam tanda kurung dengan kode dibawah ini

(\&|$)|\/+$/, "")

Simpan template dan lihat reviewnya,

Nah cara diatas bisa kamu terapkan pada template Viomagz atau template lain yang memiliki kode yang mirip dengan kode script tersebut. Namun jika kode script diatas tidak ada mungkin Widget tersebut hanya disembunyikan oleh tag kondisional yang biasanya seperti dibawah ini.

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'><div id='related-wrapper'>
<div class='related-post' id='related-post'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if>];var relatedPostConfig={homePage:&quot;<data:blog.homepageUrl/>&quot;,widgetTitle:&quot;&lt;h4&gt;Artikel Terkait&lt;/h4&gt;&quot;,numPosts:6,summaryLength:0,titleLength:&quot;auto&quot;,thumbnailSize:320,noImage:&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,containerId:&quot;related-post&quot;,newTabLink:false,moreText:&quot;Read More&quot;,widgetStyle:3,callBack:function(){}}
  </script></div>
</b:if>

Hapus kode tag kondisional diatas atau ganti "false" jadi "true"

Demikian semoga Cara Mengatasi Artikel Terkait Tidak Muncul Pada Halaman Mobile Kali ini Bermanfaat, Happy Blogging.

03/01/19

Rekomendasi Tools Screenshoot Halaman Web Full Page


Artikel ini membahas tentang alat yang dapat digunakan untuk mengambil screenshot dari seluruh halaman web. Alat ini sangat berguna bagi mereka yang perlu mengambil screenshot dari halaman web secara lengkap, bukan hanya bagian yang terlihat di layar.

Alat ini bernama "Nimbus Screenshot" dan tersedia sebagai ekstensi untuk browser Google Chrome dan Mozilla Firefox. Setelah menginstal ekstensi ini, kamu dapat dengan mudah mengambil screenshot dari seluruh halaman web hanya dengan satu klik.

Berikut adalah langkah-langkah untuk menggunakan Nimbus Screenshot:

Bagi sebagian orang mungkin screenshoot  ini bukanlah hal penting, namun tidak untuk para design web atau para pembuat website. Mendapatkan screenshot dari website hasil karyanya secara keseluruhan adalah hal yang penting, mengingat sebuah halaman website yang di screenshoot tersebut nantinya akan digunakan sebagai demo atau review ketika hendak di promosikan untuk dijual dalam sebuah artikel.

Untuk kamu yang sedang mencari-cari cara Screenshot Halaman web full page diandroid tentu kamu tidak salah lagi jika masuk ke artikel kali ini, karena disini saya akan membagikan tutorialnya secara cuma-cuma. Nah gimana sih caranya, yuk simak tutorial nya berikut ini.

Cara Screenshoot Halaman Website Full Page


Sebelum saya menjelaskan gimana cara Screenshoot Halaman web full page tanpa terpotong di android, kamu bisa lihat dulu contoh screenshoot yang baru saja saya ambil pada salah satu blog saya yaitu lovelybekasi.web.id di bawah ini.

Ini tampilan Dekstop:


Dan ini tampilan mobile:


Mohon maaf jika gambar agak buram di karenakan gambar saya perkecil ukurannya agar tidak memberatkan loading blog, gambar asli hasil screenshoot diatas lebih jelas dan lebih tinggi resolusinya.

Nah jika kamu sudah melihat hasil yang saya lampirkan diatas sekarang mari kita coba Screenshoot Halaman Web kalian dengan cara sebagai berikut:

  • Buka browser kamu, bebas, boleh Chrome, modzila atau browser bawaan hp kamu.
  • Tap dan copy paste link https://web-capture.net ke kolom pencarian browser.
  • Masukan link website/blog km dikolom yang tersedia.
  • Pilih format gambar yang ingin dihasilkan screenshoot, ada 7 Pilihan format gambar yang tersedia yaitu adalah JPEG, PNG, SVG, File PDF, TIFF, BMP dan File Postscript (PS)
  • Setelah pilih format gambar, tap tombol Tangkap Halaman Web di bagian bawah kolom tempat kamu memasukan link web yang ingin kamu ambil gambarnya.
  • Tunggu hingga proses screenshoot selesai.
  • Unduh file hasil proses screenshoot tadi ke hp/PC kamu.
  • Selesai.


Nah coba lihat hasil download Screenshoot yang dihasilkan tadi. Gimana mudah bukan???

Dengan ini artinya kamu sudah berhasil membuat screenshot halaman website full satu halaman penuh, yuk share artikel ini agar teman-teman kamu tau Cara Paling mudah Screenshoot Web Full Page tanpa aplikasi yang telah saya bagikan kali ini.

23/11/18

Perbaikan Thumbnail Gambar Blur Pada Widget Popular Post

Perbaikan thumbnail Gambar Blur di blog

Thumbnail blur atau gambar buram pada blog merupakan masalah yang serius bagi kebanyakan blogger, tentu saja hal ini pasti membuat tampilan blog jadi kurang menarik dan profesional. Gambar buram umumnya sering terjadi pada widget popular post maupun recent post. Meski tak jarang halaman homepage pun sering mengalami hal seperti ini.

Untuk itu kali ini saya akan sedikit berbagi cara Memperbaiki Thumbnail Gambar yang buram pada popular post blogger. Nah simpel saja, untuk memperbaikinya pun tidak begitu sulit, kamu hanya cukup mengubah resolusi gambar seperti yang saya pernah terapkan pada template blog yang saya gunakan saat ini.

Perbaikan Thumbnail Gambar Buram Pada Popular Post


Monggo, buka template editor dan temukan kode berikut.

data:post.featuredImage, 72, "1:1"

72 merupakan tinggi dari gambar utama yang muncul pada popular post dan 1:1 adalah perbandingan resolusi gambar.

Silakan ubah angka 72 menjadi 200 atau 300 dan 1:1 menjadi 2:1 atau 3:2 (coba satu persatu). Jika sudah simpan kembali template dan coba lihat hasilnya.

Cara ini 100% berhasil ketimbang cara yang lainnya yang pernah saya temui di beberapa blog, seperti dengan menbahkan JS dan lain-lain.

Demikian semoga apa yang bisa saya share kali ini mengenai Perbaikan Thumbnail Gambar Blur Pada Widget Popular Post bermanfaat. Happy blogging!

17/10/18

Cepat Terindeks! Cara Submit URL Di Search Console Baru

Submit url artikel blog di webmaster

Belum lama ini google telah mengubah tampilan webmaster menjadi lebih baik, dengan menu yang lebih ringkas dan simple mungkin banyak di antara pembuat website atau blog bingung bagaimana cara submit url di webmaster baru agar tiap artikel baru yang di publikasikan lebih cepat terindeks di halaman pencarian.

Awalnya saya sendiri bingung, dan masih mengalihkan dan menggunakan webmaster lama untuk submit tiap url yang saya publikasikan. Namun ternyata untuk submit url di webmaster baru lebih mudah ketimbang submit url di webmaster lama. Nah buat kalian yang masih bingung gimana cara submit url di webmaster baru, kamu bisa ikuti langkah-langkah nya di bawah ini.

Cara Submit URL di Google Webmaster Baru


Silakan login terlebih dahulu menggunakan akun gmail yang terdaftar di situs Google Search Console dan tap menu Bar di Pojok kiri atas > Inspeksi URL > Masukan URL > Enter > Minta pengindeksan.

Submit URL Di Search Console Baru

Proses pengindeksan dibutuhkan waktu 1-2 menit, biarkan dan tunggu sebelum tab popup baru muncul.

Nah selesai, lakukan hal tersebut secara rutin setelah kamu selesai memposting artikel baru agar lebih cepat terindeks oleh mesin pencari google. Demikian Tutorial kali ini mengenai Cara Submit URL Di Search Console Baru.

04/05/18

Solusi Gambar Blog Menyamping Saat Share Ke Facebook

Gambar blog miring saat dishare ke facebook

Di google banyak sekali template gratis maupun berbayar yang di bagikan secara gratis, namun ternyata banyak sekali kekurangan dan salah satu kekurangan tersebut adalah masalah gambar berada di posisi kiri dan judul di posisi kanan saat link postingan di bagikan ke facebook.

Nah untuk menangani masalah Gambar Blog Menyamping Saat Share Ke Facebook sebenarnya tidak lah terlalu sulit, kamu cukup menambahakan beberapa rangkaian meta tag, dan untuk menerapakannya ikuti langkah-langkah berikut:

Solusi Gambar Blog Menyamping Saat Share Ke Facebook


Sebelum menambahkan beberapa meta tag di bawah ini baiknya backup dulu template kamu untuk menghindari hal-hal yang tidak di inginkan.

Jika sudah buka template dan cari kode seperti berikut.

<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>

Tambahkan kode berikut tepat dibawah kode yang kamu cari tadi.

<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="315" />

Jika di gabungkan hasilnya akan seperti berikut.

<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="315" />
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoAhZ4bwQoJ-tOkxTcKzs25ZUZIcFCYwJZfegCJTmfWK-K31gOf4t9jW2cWOHUZY-WhUeTMT7VAW00Ahv95J3qZUx-EVAnU-SIhBWRJ1UQ33y-WOkdTknOoXW-TJ0ifgkkYdRlb7r4uQiP/s1600/KonveksiQu-Banner.jpg' property='og:image'/>
</b:if>
</b:if>

Simpan template dan coba share kembali salah satu postingan kamu ke facebook. Lihat hasilnya. Bagaimana apakah gambar artikel postingan kamu sudah tidak menyamping lagi?

Share yuk artikel ini agar teman-teman kamu tau bagaimana mudahnya mengatasi Gambar artikel Blog Menyamping Saat Share Ke Facebook.

Akhir kata

Demikian Semoga Solusi Gambar Blog Menyamping Saat Share Ke Facebook bermanfaat untuk kamu. Salam.

28/03/18

Mudah! Panduan Edit HTML Menggunakan Ponsel

Sebagai seorang blogger pastinya kamu tidak asing dengan yang namanya HTML. HTML atau Hyper Text Multi Laguage adalah bahasa pemrograman yang terdiri dari rangkain dan kode-kode khusus seperti huruf, angka maupun karakter tertentu.

Hypertext Markup Language juga merupakan sebuah bahasa markah yang digunakan untuk design sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. (Sumber: Wikipedia)

Jadi dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML

Untuk mengedit HTML di blogger biasanya kita dapat melakukannya dengan masuk ke dasboard blogger > Theme > Edit HTML, namun hal ini tentu hanya bisa di akses dengan menggunakan Komputer. Lalu bagaimana jika kami ingin mengedit dengan menggunakan Smartphone???

Jika Kamu membuka dasbord blogger dengan smartphone tentu bisa saja namun screen yang di tampilkan hanya support tampilan desktop. Hal ini pasti akan sedikit menyulitkan pandangan mata kamu.

Apalagi jika kita ingin mengedit HTML untuk merubah tampilan blog, setelah tampilan Kode2 HTML tersebut terbuka kita tidak dapat melakukan hal-hal yang biasa diakukan ketika mengunakan dekstop seperti mengedit maupun menghapus kode-kode tertentu yang kita inginkan.

Untuk bisa mengedit file HTML kamu perlu menambahkan aplikasi tambahan yang bisa membuka file dan mengedit file HTML dengan mudah. Dari dari sekian banyak aplikasi sejenis yang sudah saya coba, saya rekomendasikan sebaiknya kamu menggunakan aplikasi Quick Edit.

Lalu bagaimanakah cara menggunakannya agar kamu dapat dengan mudah mengedit file HTML, CSS maupun JavaScript untuk merubah design blog atau website? simak aja Cara Paling Gampang Edit HTML Via Smartphone berikut ini.

Cara Edit HTML Dengan Quick Edit


Buka smartphone kamu dan lakukan langkah-langkah berikut:

  • Langkah Pertama Download dan instal terlebih dahulu aplikasi Quick Edit di Google Play.
  • Download Template/Tema blog yang ingin kamu edit.
  • Buka file tema yang kamu download tadi.
  • Edit sesuai keinginan anda.
  • Simpan kembali.
  • Upload kembali Tema yang kamu edit tadi ke blog.
  • Selesai

Sebaiknya backup template kamu sebelum mengedit dengan Quick Edit dengan cara mengcopy filenya menjadi 2 bagian, 1 untuk edit, 1 untuk back up.

Nah untuk memudahkan kamu mencari kode-kode tertentu Tap tiga titik di pojok kanan atas dan ketik HTML, CSS, maupun Script ingin kamu edit.

Upps bagaimana? Mudah sekali bukan. Jika ada kesulitan, sisipkan komentarmu yah dibawah. Selamat mencoba. 

19/12/17

Mengalihkan Halaman Pencarian Blog Ke halaman Pencarian Google


Sekarang perhatikan HTML berikut, jika anda sering mengutak-atik template pasti paham dengan susunan kode ini:

<div itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/WebSite'>
<link expr:href='data:blog.homepageUrl' itemprop='url'/>
<form action='https://www.google.com/search' id='search-wrapper' itemprop='potentialAction' itemscope='itemscope' itemtype='http://schema.org/SearchAction' method='get' target='_blank'>
<meta content='https://www.google.com/search?q={q}' itemprop='target'/>
<input name='cof' type='hidden' value='FORID:10'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input class='search-form' itemprop='query-input' name='q' placeholder='Cari artikel...' required='required' type='search'/>
<input expr:value='data:blog.homepageUrl' name='as_sitesearch' type='hidden'/>
<button class='search-button' title='Search' type='submit'SEARCH</button>
</form></div>

Dari rangkaian kode di atas anda tak perlu mengganti semuanya, pada tiap template pasti memiliki kode yang berbeda, namun intinya tetap sama. Dari beberapa kode di atas pasti sudah ada dalam kode search form pada template anda saat ini, yang anda lakukan adalah cukup sesuaikan kode yang saya block merah dengan id dan class pada CSS search form anda saat ini.

Sebagai contoh, dibawah ini adalah kode awal sebelum kode diatas di tambahkan:

<form action='/search' id='searchform'>
<input name='cof' type='hidden' value='FORID:10'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input id='search-form' name='q' placeholder='Search here....' required='required' type='text'/>
<button class='search-button' title='Search' type='submit'><i aria-hidden='true' class='fa fa-search'/></button>
</form>

Maka hasilnya akan seperti dibawah ini:


<div itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/WebSite'>
<link expr:href='data:blog.homepageUrl' itemprop='url'/>
<form action='https://www.google.com/search' id='searchform' itemprop='potentialAction' itemscope='itemscope' itemtype='http://schema.org/SearchAction' method='get' target='_blank'>
<meta content='https://www.google.com/search?q={q}' itemprop='target'/>
<input name='cof' type='hidden' value='FORID:10'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input id='search-form' name='q' placeholder='Cari artikel....' required='required' type='text'/>
<input expr:value='data:blog.homepageUrl' name='as_sitesearch' type='hidden'/>
<button class='search-button' title='Search' type='submit'><i aria-hidden='true' class='fa fa-search'/></button>
</form></div>

Perhatikan kode yang saya tandai, yang berwarna merah adalah id dan class nya, kode yang berwarna kuning adalah kode yang saya ubah, dan kode yang berwarna biru adalah kode yang saya tambahkan.

Simpan template dan coba ketikan kata kunci di kolom search form anda, jika belum berhasil anda bisa mengganti search form anda dengan Search form with keyframe effect seperti artikel yang sudah saya bagikan sebelumnya Disini.

Demikian Artikel mengenai cara Mengalihkan halaman pencarian blog ke halaman pencarian Google. Selamat beraktifitas.

18/12/17

Cara Simple Membuat Social Share Button Dengan Font Awesome

Social Share button dengan font awesome

Pada artikel sebelumnya pernah saya bagikan artikel yang sama tentang Cara membuat social share button lengkap dengan Whatsapp, Line dan BBM, namun kali ini Social Share yang saya bagikan sangat simple dan mudah untuk diterapkan diblog.

Terdapat 3 tombol share umum yang saya letakan pada social share kali ini, yaitu Facebook, Twiter dan Google+.

Untuk penerapannya, ikuti langkah-langkah berikut:


Langkah 1

Letakan kode CSS berikut diatas </style>

/* Simple Socshare With Font Awesone */
.shareku span {font-size:16px}
.shareku a, .shareku a:hover {color:#fff}
.fb, .twit, .gplus {text-align:center; padding:5px 12px; font-size:12px; border-radius:3px}
.fb { background-color:#1358BA}
.twit { background-color:#03C7E9}
.gplus { background-color:#FE1635}
.fb:hover, .twit:hover, .gplus:hover {background-color:#547279; transition:background-color 0.7s ease-out 0s}

Langkah 2

Cari kode <div class='post-footer-line-1'> dan letakan kode berikut tepat dibawahnya:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='shareku'>
<span>Bagikan Artikel:</span>
<a class='fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank'><i class='icon-facebook icon-large'/> Facebook</a> 
<a class='twit' expr:href='&quot;http://twittter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><i class='icon-twitter icon-large'/> Twitter</a> 
<a class='gplus' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><i class='icon-google-plus icon-large'/> Google+</a>
</div>
</b:if>

Langkah 3

Karena Social share ini menggunakan Font Awesome, pastikan anda sudah menambahkan kode berikut ke dalam template tepat di atas </head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

Lewati langkah ke 3 jika sudah terdapat kode tersebut di dalam template anda.

Selesai, simpan template dan lihat hasilnya.

Demikian Cara membuat Cara Simple Membuat Social Share button dengan Font Awesome. Selamat beraktifitas.

Membuat Page Loader Sederhana Ala Arlina Design

Membuat Page Loader Sederhana Ala Arlina Design

Pada tutorial kali ini saya akan membagikan tutorial cara membuat page loader atau efek loading yang di gunakan pada template arlina design, page loader ini mirip seperti Membuat Efek Loading Bar Seperti Di Youtube yang sudah saya bagikan pada tutorial sebelumnya.

Page loader ini akan muncul sebelum halaman blog terbuka, efeknya page loader ini memunculkan berbagai warna yang berganti dan melebar keluar secara horizontal.

Nah jika anda tertarik menambahkan efek ini, berikut adalah langkah-langkahnya:

Membuat Page Loader Arlina


Langkah awal letakan kode CSS berikut diatas </style>

/* CSS Loader Arlina */
.cssload-loader{position:absolute;bottom:0;left:0;right:0;margin:auto;z-index:1000}
myloader [role="progressbar"][aria-busy="true"]{position:absolute;top:0;left:0;padding-bottom:3px;width:100%;background-color:#159756;-webkit-animation:preloader-background linear 3.5s infinite;animation:preloader-background linear 3.5s infinite}
myloader [role="progressbar"][aria-busy="true"]::before,myloader [role="progressbar"][aria-busy="true"]::after{display:block;position:absolute;top:0;z-index:2;width:0;height:3px;background:#afa;-webkit-animation:preloader-front linear 3.5s infinite;animation:preloader-front linear 3.5s infinite;content:''}
myloader [role="progressbar"][aria-busy="true"]::before{right:50%}
myloader [role="progressbar"][aria-busy="true"]::after{left:50%}
@-webkit-keyframes preloader-background{0%,24.9%{background-color:#159756}25%,49.9%{background-color:#da4733}50%,74.9%{background-color:#3b78e7}75%,100%{background-color:#fdba2c}}
@keyframes preloader-background{0%,24.9%{background-color:#159756}25%,49.9%{background-color:#da4733}50%,74.9%{background-color:#3b78e7}75%,100%{background-color:#fdba2c}}
@-webkit-keyframes preloader-front{0%{width:0;background-color:#da4733}24.9%{width:50%;background-color:#da4733}25%{width:0;background-color:#3b78e7}49.9%{width:50%;background-color:#3b78e7}50%{width:0;background-color:#fdba2c}74.9%{width:50%;background-color:#fdba2c}75%{width:0%;background-color:#159756}100%{width:50%;background-color:#159756}}
@keyframes preloader-front{0%{width:0;background-color:#da4733}24.9%{width:50%;background-color:#da4733}25%{width:0;background-color:#3b78e7}49.9%{width:50%;background-color:#3b78e7}50%{width:0;background-color:#fdba2c}74.9%{width:50%;background-color:#fdba2c}75%{width:0%;background-color:#159756}100%{width:50%;background-color:#159756}}

Selanjutnya letakan JavaScript berikut diatas </body>

<script type='text/javascript'>
//<![CDATA[
// Loader
$(document).ready(function(){$("body").removeClass("page-isload"),$("#pagingx").fadeOut(8000),$("#loader").fadeOut(8000)});
//]]>
</script>

Kemudian letakan Kode berikut di diantara tag <body> dan </body> (tempatkan sesuai keinginan anda)

<div class='cssload-loader' id='loader'><myloader>
<div aria-busy='true' aria-label='Loading, please wait.' role='progressbar'></div>
</myloader></div>
<div class='page-loader' id='pagingx'></div>

Simpan template.

Jika anda masih bingung peletakan kode HTML diatas anda bisa melihat kode diatas yang saya letakan tepat dibawah Navigasi menu berikut:

<nav id='navigation-hype' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<div class='maxwrap'>
<input type='checkbox'><i aria-hidden='true' class='fa fa-align-left'/> Menu</input>
<div class='cssload-loader' id='loader'><myloader>
<div aria-busy='true' aria-label='Loading, please wait.' role='progressbar'/>
</myloader></div>
<div class='page-loader' id='pagingx'/>
<ul>
<li class='indie'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='name'><i class='fa fa-home'/> Home</span></a></li>
<li><a href='http://idnaquarium.blogspot.co.id/search/label/Info%20Ikan' itemprop='url'><span itemprop='name'>Info Ikan</span></a></li>
<li><a href='http://idnaquarium.blogspot.co.id/search/label/Jenis%20Ikan' itemprop='url'><span itemprop='name'>Jenis Ikan</span></a></li>
<li><a href='http://idnaquarium.blogspot.co.id/search/label/Pakan' itemprop='url'><span itemprop='name'>Pakan</span></a></li>
<li><a href='http://idnaquarium.blogspot.co.id/search/label/Akuarium' itemprop='url'><span itemprop='name'>Akuarium</span></a></li>
<li><a href='http://idnaquarium.blogspot.co.id/search/label/Budidaya%20Ikan' itemprop='url'><span itemprop='name'>Budidaya Ikan</span></a></li>
<li><a href='http://idnaquarium.blogspot.co.id/search/label/Wisata%20Air' itemprop='url'><span itemprop='name'>Wisata Air</span></a></li>
<li><a href='http://idnaquarium.blogspot.co.id/search/label/Tips%20Trik' itemprop='url'><span itemprop='name'>Tips Trik</span></a></li>
</ul>
</div>
</nav>


Demikian Cara membuat Page loader ala Arlina Design, semoga dapat menjadi bahan inspirasi untuk anda.